import React, { CSSProperties } from 'react'
import { Outlet } from 'react-router-dom'
import { Badge, TabBar } from 'antd-mobile'
import { AppOutline, UnorderedListOutline, MessageOutline, UserOutline } from 'antd-mobile-icons'
import { useRouterHook } from '../utils/hooks'
const Root: React.FC = () => {
    const { location: { pathname }, navigate } = useRouterHook()

    const tabs = [
        {
            key: '/',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: '/find',
            title: '发现',
            icon: <MessageOutline />,
        },
        {
            key: '/appoint',
            title: '预约',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/my',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    const tabStyle: CSSProperties = {
        position: 'fixed',
        bottom: 0,
        left: 0,
        width: '100%',
        borderTop: '1px solid #eee',
        background: '#FFF'
    }
    const change = (key: string) => {
        navigate(key)
    }
    return (
        <div style={{ marginBottom: 100 }}>
            {/* 二级路由出口 */}
            <Outlet />
            {/* tabbar */}
            {/* activeKey: 设置当前激活导航菜单的key */}
            <TabBar onChange={change} style={tabStyle} activeKey={pathname}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}

export default Root